import React, { Component } from 'react'

export default class App extends Component {
  // 当用户输入的时候,就将用户输入的内容存储到一个对象里面.所以当用户输入完毕之后,对象里面就存储了表单中的所有的数据了.
  xxx = {
    username: '',
    password: '',
  }
  render() {
    return (
      <div>
        用户名:
        <input
          type="text"
          // 注意: 在DOM中文本框失去焦点,则change事件触发. 但是react中,只要用户输入change事件就触发
          onChange={(e) => {
            this.xxx.username = e.target.value.trim()
          }}
        />
        <br />
        密码: <input type="password" />
        <br />
        <button
          onClick={() => {
            console.log(this.xxx)
          }}
        >
          注册
        </button>
      </div>
    )
  }
}
